<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!--
      HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
    -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .wrap {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url('images/bg03.jpg') center bottom no-repeat;
            overflow: auto;
        }
        
        .navbar-brand {
            padding: 10px 15px;
        }
        
        .page-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .file-input {
            outline: none;
            display: inline-block;
            margin-top: 5px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-horizontal {
            margin-top: 10px;
        }
        
        .logout {
            font-weight: 900;
            font-size: 20px;
            color: #ff0000;
            text-decoration: none;
        }
        
        .logout:hover {
            text-decoration: none;
            color: yellowgreen;
        }
        
        .preview {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <nav class="navbar  navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading clearfix">
                            <div class="row">
                                <div class="col-md-6 page-title">新增英雄</div>
                                <div class="col-md-6 text-right">当前位置：首页 &gt; 新增英雄</div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <form action="#" method="" class="form-horizontal">
                                <div class="form-group">
                                    <label for="heroName" class="col-sm-2 control-label">姓名</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="heroName" name="name" placeholder="请输入姓名" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="skillName" class="col-sm-2 control-label">技能</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="skillName" name="skill" placeholder="请输入技能" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="heroIcon" class="col-sm-2 control-label">头像</label>
                                    <div class="col-sm-10">
                                        <input type="file" class="file-input" id="heroIcon" name="icon" />
                                        <img src="" class="preview" alt="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-success btn-add">
                                            新 增
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>

    <script>
        $('#heroIcon').on('change', function() {
            let fileCheck = this.files[0];
            let urlAdress = URL.createObjectURL(fileCheck);
            $('img.preview').attr('src', urlAdress)
        })

        $('.btn-add').on('click', function(e) {
            e.preventDefault();

            // 创建FoemData，为dom对象
            let fd = new FormData($('form')[0])
                // 检测：是否含有name属性，nema属性的值是否与接口的键一致
            $.ajax({
                type: 'post',
                url: 'http://localhost:4399/hero/add',
                data: fd,
                contentType: false,
                processData: false,
                success: function(backData) {
                    if (backData.code == 201) {
                        alert(backData.msg);
                        window.location.href = './index.html'
                    }
                }
            })
        })
    </script>
</body>

</html>